<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-xyzlb-add"  enctype="multipart/form-data">
			<div class="form-group">
				<label class="col-sm-3 control-label">机构ID：</label>
				<div class="col-sm-8">
					<input class="form-control" type="hidden" name="deptId" readonly="true" id="treeId">
					<input name="deptName" class="form-control" type="text" onclick="selectDeptTree()" readonly="true" id="treeName">
				</div>
			</div>
			<!--<div class="form-group">	-->
				<!--<label class="col-sm-3 control-label">学员编号：</label>-->
				<!--<div class="col-sm-8">-->
					<!--<input id="xybh" name="xybh" class="form-control" type="text">-->
				<!--</div>-->
			<!--</div>-->
			<div class="form-group">
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input id="studentName" name="studentName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">性别：</label>
				<div class="col-sm-8">
					<select id="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">民族：</label>
				<div class="col-sm-8">
					<input id="nation" name="nation" class="form-control" type="text" value="汉族">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">手机号码：</label>
				<div class="col-sm-8">
					<input id="studentTelephone" name="studentTelephone" class="form-control" type="text">
				</div>
			</div>
			<!--<div class="form-group">
				<label class="col-sm-3 control-label">生日：</label>
				<div class="col-sm-8">
					<input id="birthday" name="birthday" class="form-control" type="date" >
				</div>
			</div>-->
			<div class="form-group">
				<label class="col-sm-3 control-label">生日：</label>
				<div class="col-sm-8 birthday">
					<input id="birthday" name="birthday" class="form-control" type="text" readonly="readonly">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">年龄：</label>
				<div class="col-sm-8">
					<input id="age" name="age" class="form-control" type="text" readonly  unselectable="on">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">职业背景：</label>
				<div class="col-sm-8">
					<input id="occupation" name="occupation" class="form-control" type="text" placeholder="例如：人事、IT等">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">婚姻：</label>
				<div class="col-sm-8">
					<select id="marriage" class="form-control m-b" th:with="type=${@dict.getType('zl_xyzlb_huny')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">小孩：</label>
				<div class="col-sm-8">
					<select id="child" class="form-control m-b" th:with="type=${@dict.getType('zl_hyzlb_xiaoh')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">住址：</label>
				<div class="col-sm-8">
					<input id="studentAddress" name="studentAddress" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">身份证号：</label>
				<div class="col-sm-8">
					<input id="identity" name="identity" class="form-control" type="text">
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">身份证正面：</label>
                <div class="col-sm-8">
                    <input id="identityz" name="identityz" class="form-control" type="text" readonly="readonly">
                    <button id="up_identityz" type="button">点击上传</button>
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label">身份证反面：</label>
				<div class="col-sm-8">
					<input id="identityf" name="identityf" class="form-control" type="text" readonly="readonly">
					<button id="up_identityf" type="button">点击上传</button>
				</div>
			</div>
			<!--<div class="container">
				<div class="imageBox">
					<div class="thumbBox"></div>
					<div class="spinner" style="display: none">请大佬上传身份证图片....</div>
				</div>
				<div class="action">
					<div class="new-contentarea tc">
						<a href="javascript:void(0)" class="upload-img"> <label for="identityz_file">上传身份证图像</label> </a>
						<input type="file" class="" name="identityz_file" id="identityz_file" accept="image/*"/>
					</div>
					<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
					<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
					<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
				</div>
				<div class="cropped"></div>
			</div>-->
			<div class="form-group">
				<label class="col-sm-3 control-label">课程类型：</label>
				<div class="col-sm-8">
					<select id="courseType" class="form-control m-b" th:with="type=${@dict.getType('zl_song_leibie')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">收费等级：</label>
				<div class="col-sm-8">
					<select id="chargeLevel" class="form-control m-b" th:with="type=${@dict.getType('zl_subject_level')}">
						<option th:each="dict : ${type}"  th:text="${dict.dictLabel}" th:data-remark="${dict.remark}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">收费金额：</label>
				<div class="col-sm-8">
					<input id="amountCharges" name="amountCharges" class="form-control" type="text" readonly  unselectable="on">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">推荐人：</label>
				<div class="col-sm-8">
					<input id="recommender" name="recommender" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">缴费日期：</label>
				<div class="col-sm-8">
					<input id="paymentDate" name="paymentDate" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">接待教师：</label>
				<div class="col-sm-8">
					<input id="receptionist" name="receptionist" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">来源渠道：</label>
				<div class="col-sm-8">
					<input id="sourceChannel" name="sourceChannel" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
    <script type="text/javascript">
		$(".birthday").on("click",function () {
            var callback = function (value, date) {
                // 获得今天的时间
                var date = new Date();
                var birthday1 = value;
                console.log(birthday1);
                var startDate = new Date(birthday1);
                var newDate = date.getTime() - startDate.getTime();
                // 向下取整  例如 10岁 20天 会计算成 10岁
                // 如果要向上取整 计算成11岁，把floor替换成 ceil
                var age1 = Math.floor(newDate / 1000 / 60 / 60 / 24 / 365);
                console.log(age1);
                $("#age").val(age1 < 0 ? 0 : age1);
            }
            pickTime("#birthday", callback);
        })


//        var options_year_class = eval("[[${@dict.getTypeJson('zl_subject_year')}]]".replace(/&quot;/g, "'"));
//        var options_level_class = eval("[[${@dict.getTypeJson('zl_subject_level')}]]".replace(/&quot;/g, "'"));
//        $("#courseType").on("change", function () {
//            var options;
//            var _options_html = "";
//            if ($(this).val() == "level") {
//                console.log("level")
//                options = options_level_class;
//            } else {
//                console.log("year")
//                options = options_year_class;
//            }
//            for (var i = 0; i < options.length; i++) {
//                var option = options[i];
//                console.log(option);
//                _options_html = _options_html + "<option value='" + option.dictValue + "' data-remark='"+option.remark+"'>" +  option.dictLabel + "</option>"
//            }
//            $("#chargeLevel").html(_options_html);
//            $("#amountCharges").val($("#level option:selected").attr("data-remark"))
//        })
//
//        $("#amountCharges").val($("#level option:selected").attr("data-remark"))
//        $("#level").on("change", function () {
//            $("#amountCharges").val($("#level option:selected").attr("data-remark"))
//        })
        var options_year_class = eval("[[${@dict.getTypeJson('zl_subject_year')}]]".replace(/&quot;/g, "'"));
        var options_level_class = eval("[[${@dict.getTypeJson('zl_subject_level')}]]".replace(/&quot;/g, "'"));
        $("#courseType").on("change", function () {
            console.log(66666)
            var options;
            var _options_html = "";
            if ($(this).val() == "level") {
                console.log("level")
                options = options_level_class;
            } else {
                console.log("year")
                options = options_year_class;
            }
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                console.log(option)
                _options_html = _options_html + "<option value='" + option.dictValue + "' data-remark='"+option.remark+"'>" +  option.dictLabel + "</option>"
            }
            $("#chargeLevel").html(_options_html);
            $("#amountCharges").val($("#chargeLevel option:selected").attr("data-remark"))
        })
        $("#amountCharges").val($("#chargeLevel option:selected").attr("data-remark"))
        $("#chargeLevel").on("change", function () {
            $("#amountCharges").val($("#chargeLevel option:selected").attr("data-remark"))
        })

		var prefix = ctx + "project/xyzlb"
		$("#form-xyzlb-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

        function submitHandler() {
            if ($.validate.form()) {
                add();
            }
        }

        function add() {
            var formdata = new FormData();
            //var img = cropper.getBlob();
            //formdata.append("identityz_file", img);
            formdata.append("deptId", $("input[name='deptId']").val());
            formdata.append("identityz", $("input[name='identityz']").val());
            formdata.append("identityf", $("input[name='identityf']").val());
            formdata.append("deptName", $("input[name='deptName']").val());
            formdata.append("studentName", $("input[name='studentName']").val());
            formdata.append("nation", $("input[name='nation']").val());
            formdata.append("studentTelephone", $("input[name='studentTelephone']").val());
            formdata.append("birthday", $("input[name='birthday']").val());
            formdata.append("age", $("input[name='age']").val());
            formdata.append("occupation", $("input[name='occupation']").val());
            formdata.append("marriage", $("#marriage option:selected").val());
            formdata.append("sex", $("#sex option:selected").val());
            formdata.append("child", $("#child option:selected").val());
            formdata.append("studentAddress", $("input[name='studentAddress']").val());
            formdata.append("identity", $("input[name='identity']").val());
            formdata.append("chargeLevel", $("#chargeLevel option:selected").val());
            formdata.append("amountCharges", $("input[name='amountCharges']").val());
            formdata.append("courseType", $("#courseType option:selected").val());
            formdata.append("paymentDate", $("input[name='paymentDate']").val());
            formdata.append("receptionist", $("input[name='receptionist']").val());
            formdata.append("sourceChannel", $("input[name='sourceChannel']").val());
            formdata.append("remark", $("input[name='remark']").val());
            formdata.append("recommender", $("input[name='recommender']").val());

            $.ajax({
//                cache : true,
                type : "POST",
                url : ctx + "project/xyzlb/add",
                data : formdata,
//                async : false,
                processData: false,
				contentType: false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.saveSuccess(data);
                }
            });
        }

        /*用户管理-新增-选择部门树*/
        function selectDeptTree() {
            var treeId = $("#treeId").val();
            var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
            var options = {
                title: '选择部门',
                width: "380",
                url: ctx + "system/dept/selectDeptTree/" + deptId,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }
        }

        $("#up_identityz").on('click', function () {
            var identityz  = $('#identityz').val()
            var height = ($(window).height() - 50);
            layer.open({
                type: 2,
                area: ['80%', height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: '图片上传',
                content: ctx + 'common/img?imgType=card&elem=identityz' + ($.common.isEmpty(identityz) ? '' : '&imgName=' + identityz),
                // 弹层外区域关闭
                shadeClose: true,
                success: function (layero, index) {
                }
            });
        });
        $("#up_identityf").on('click', function () {
            var identityf  = $('#identityf').val()
            var height = ($(window).height() - 50);
            layer.open({
                type: 2,
                area: ['80%', height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: '图片上传',
                content: ctx + 'common/img?imgType=card&elem=identityf' + ($.common.isEmpty(identityf) ? '' : '&imgName=' + identityf),
                // 弹层外区域关闭
                shadeClose: true,
                success: function (layero, index) {
                }
            });
        })
	</script>
</body>
</html>
